<template>
	<div id="login">
		<div class="l-right">
			<div class="l-l">
				 <!-- @tab-click="handleClick" -->
				<el-tabs v-model="activeName">
					<el-tab-pane label="用户登录" name="first">
						<!-- el-form:自定义表单组件 -->
					    <!-- :model="form" 表单对象，用于收集收据 -->
					    <!-- label-width="80px"：label的宽度 -->
					    <!-- el-form-item：表单项  -->
						<el-form ref="form" status-icon :rules="rules" :model="form" label-width="80px">
							<el-form-item  prop="username">
								<el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="iconfont icon-yonghuming"></el-input>
							</el-form-item>
							<el-form-item  prop="password">
								<!-- 将来我们给组件注册事件的时候，可以会注册不上 -->
								<!--@keyup.enter点击键盘的enter触发事件-->
								<!-- .native: 注册事件，给组件的根元素注册事件 -->

								<el-input type="password" v-model="form.password" placeholder="请输入密码" @keyup.enter.native="login" prefix-icon="iconfont icon-mima"></el-input>
							</el-form-item>
							<el-form-item>
								<!--使用@语法糖绑定事件-->
								<el-button type="primary" @click="login">登录</el-button>
								<el-button @click="reset">重置</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="帅哥登录" name="second">长得很帅</el-tab-pane>
				</el-tabs>
			</div>
			
		</div>
	</div>
</template>

<script>
	 export default {
		data () {
			return {
//				定义一些变量,可以使用{{}}语法在页面中直接获取
				activeName: 'first',
				form: {
					username: 'why',
					password: "123456"
				},
				rules: {
					// 用户名的校验
					username: [
						// 用户名是必须
//						required是否必须
//						message提示信息
//						trigger如何触发
						{ required: true, message: '请输入用户名', trigger: 'change' },
						{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'change' }
					],
					// 密码的校验
					password: [
						{ required: true, message: '请输入密码', trigger: 'change' },
						{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			login () {
//			 先触发页面中的检验规则,不通过给提示,通过就向后台发送请求,
//           $refs是vue中获取页面的,在html中要写 ref="form"
		     this.$refs.form.validate(async (valid) => {
				 if (valid) {
//				 	使用axios向后台发送请求
//                  在es6中的箭头函数没有this绑定，可以打印出来指向的是vue实例，这点可以自行百度，加深映像
					 this.axios('api/login').then( res => {
						 console.log(res.data[0])//用来查看接口里面的数据
						 let lg = res.data[0] //把数据赋值给变量
						 console.log(lg.username,lg.password)//主要用来查看数据
						 if(lg.username === this.form.username && lg.password==this.form.password){
							 localStorage.setItem('myToken',lg.username)//设置拦截，可以用cookie等，在控制台中的Application中查看
							 this.$message.success('恭喜你，登录成功')//登录成功的提示
							 this.$router.push('homeMain') //使用编程式导航路由进行跳转
						 }else {
							 this.$message.error('账号或者密码错误')//账号密码错误时的提示

						 }
					 })
				 }
			 })
			},
			reset () {
				this.$refs.form.resetFields()//清空输入框中的信息
//				数据被我写死了,可以自行改动
			}
		}
  };
</script>
<!--使用less-->
<style <style lang="less" scoped>
	#login {
		width: 100%;
		height: 100%;
		.l-right {
			width: 100%;
			height: 100%;
			position: relative;
			.l-l {
				/*使用定位法居中元素,如果不考虑兼容性的问题可以使用flex布局居中代码简洁,简单粗暴*/
				/*定位法:子绝对定位,父级相对定位,如果相应的父级没有定位,会顺着html的结构往最顶的父级找*/
				width: 350px;
				height:350px;
				position:absolute;
				top:50%;
				left:50%;
				margin-top: -175px;
				margin-left: -175px;
				.el-tabs {
					width: 100%;
				}
				.el-form-item__content {
					margin-left: inherit !important;
				}
			}
		}
		#tab-first {
			width: 175px;
			text-align: center;
		}
		#tab-second {
		    text-align: center;
			width: 175px;
		}
	}
	/*使用媒体查询,这是在小于1400px的屏幕宽中的样式*/
	@media only screen and (max-width: 1400px){
		.l-l {
			width: 253px !important;
			height:350px;
			.el-tabs__item {
				padding: inherit !important;
				
			}
			
			 #tab-second {
				width: 125px !important;
			}
			
			 #tab-first {
				width: 125px !important;
			}
			}
	}
</style>
